<template>
  <div id="Monitor_point" class="shadow-box">
    <!-- 项目结构及信息 -->
    <div class="middle">
      <div class="tree">
        <!-- 项目树 -->
        <div class="slide">
          <div class="title flex_sb">
            <span>{{ points_data ? selset_tree_data.name + '监控点' : '项目树' }}</span>
            <div class="flex_r_end">
              <el-link type="primary" :underline="false" icon="el-icon-refresh-right" style="font-size: 20px" @click="refreshTree"></el-link>
            </div>
          </div>
          <div class="container">
            <section v-if="points_data">
              <el-button
                icon="el-icon-back"
                class="w100"
                @click="
                  points_data = null
                  point_records = null
                  selset_point = null
                "
                >返回</el-button
              >
              <div>
                <el-table :data="points_data" style="width: 100%" :highlight-current-row="true" @row-click="point_table_row_click">
                  <el-table-column prop="name" label="点名称"> </el-table-column>
                  <el-table-column label="操作" width="150">
                    <template slot-scope="scope">
                      <div class="">
                        <el-button @click.stop="setPoint_click_fun(scope.row)" size="mini" type="primary">编辑</el-button>
                        <el-button @click.stop="delPoint_click_fun(scope.row)" size="mini" type="danger">删除</el-button>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div style="margin-top: 20px">
                <el-button class="w100" @click="add_point_click">添加点</el-button>
              </div>
            </section>
            <section v-else>
              <!-- 项目树 -->
              <ProjectTree
                ref="children_tree"
                :type="1"
                :node_click="node_click_fun"
                :clickData="{ type: 'primary', icon: 'el-icon-search', title: '点击查询部位下所有点' }"
                :clickfun="query_click_fun"
                :setPoint="setPoint_click_fun"
                :delPoint="delPoint_click_fun"
              ></ProjectTree>
              <div style="margin-top: 20px">
                <el-button class="w100" @click="add_point_click">添加点</el-button>
              </div>
            </section>
          </div>
        </div>
      </div>
      <div class="areainfo">
        <div class="slide">
          <div class="title">数据</div>
          <div class="container">
            <section class="h100 pointRecordsBox">
              <el-table :data="point_records" empty-text="没有选择点位，或点位无数据" style="width: 100%">
                <el-table-column prop="name" label="名称"> </el-table-column>
                <el-table-column prop="archHeight" label="拱顶高程"> </el-table-column>
                <el-table-column label="操作" width="150">
                  <template slot-scope="scope">
                    <div class="">
                      <el-button @click.stop="setPoint_record_click_fun(scope.row)" size="mini" type="primary">编辑</el-button>
                      <el-button @click.stop="delPoint_record_click_fun(scope.row)" size="mini" type="danger">删除</el-button>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <div v-show="selset_point" style="margin-top: 20px">
                <el-button size="mini" class="lookSurface" @click="lookSurface">表查看</el-button>
                <el-button class="w100" @click="addPoint_record_click_fun">添加数据</el-button>
              </div>
            </section>
          </div>
        </div>
      </div>
      <!-- 弹框，展示 eharts -->
      <Surface ref="surface" :show="surface_show" @exit="surface_show = false"></Surface>
    </div>

    <!-- 对话框，新建点位 -->
    <el-dialog :title="`新建一个点位`" :visible.sync="addPoint_dialog" ref="addPoint_dialog" :before-close="add_dialog_exit_fun" width="30%">
      <section class="add_dialog_body">
        <PointForm :fromData="addPoint_req" ref="addPointFormRef"></PointForm>
      </section>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addPoint_dialog = false">取 消</el-button>
        <el-button type="primary" @click="addPoint_">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 对话框，修改点位 -->
    <el-dialog :title="`修改一个点位`" :visible.sync="setPoint_dialog" ref="setPoint_dialog" :before-close="set_dialog_exit_fun" width="30%">
      <section class="add_dialog_body">
        <PointForm :fromData="setPoint_req" ref="setPointFormRef"></PointForm>
      </section>
      <span slot="footer" class="dialog-footer">
        <el-button @click="setPoint_dialog = false">取 消</el-button>
        <el-button type="primary" @click="setPoint_">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 删除点位对话框 -->
    <el-dialog :title="`删除一个点位`" :visible.sync="delPoint_dialog" ref="delPoint_dialog" width="50%">
      <section>确定要删除该点位吗</section>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delPoint_dialog = false">取 消</el-button>
        <el-button type="primary" @click="delPoint_">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 添加点位数据对话框 -->
    <el-dialog :title="`添加一个数据`" :visible.sync="addPoint_record_dialog" ref="addPoint_record_dialog" :before-close="addPoint_record_exit_fun" width="50%">
      <section class="addPoint_record_dialog_body">
        <PointRecord :fromData="addPoint_record_req" ref="addPointRecordFormRef"></PointRecord>
      </section>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addPoint_record_dialog = false">取 消</el-button>
        <el-button type="primary" @click="addPoint_record_">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改点位数据对话框 -->
    <el-dialog :title="`修改一个数据`" :visible.sync="setPoint_record_dialog" ref="setPoint_record_dialog" :before-close="setPoint_record_exit_fun" width="50%">
      <section class="addPoint_record_dialog_body">
        <PointRecord :fromData="setPoint_record_req" ref="setPointRecordFormRef"></PointRecord>
      </section>
      <span slot="footer" class="dialog-footer">
        <el-button @click="setPoint_record_dialog = false">取 消</el-button>
        <el-button type="primary" @click="setPoint_record_">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 删除点位数据对话框 -->
    <el-dialog :title="`删除一个数据`" :visible.sync="delPoint_record_dialog" ref="setPoint_record_dialog" width="50%">
      <section>确定要删除该点位数据吗</section>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delPoint_record_dialog = false">取 消</el-button>
        <el-button type="primary" @click="delPoint_record_">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Surface from '../../components/Monitor/surface.vue'
import ProjectTree from '../../components/Monitor/project_tree.vue'
import PointForm from '../../components/Monitor/forms/point.vue'
import PointRecord from '../../components/Monitor/forms/pointRecord.vue'
import { addPoint, queryPoint, setPoint, delPoint } from '../../api/monitor_point/index'
import { addPointRecord, getPonitrecord, setPointRecord, delPointRecord } from '../../api/point_record/index'
export default {
  name: 'Monitor_point',
  data() {
    return {
      surface_show: false,
      // 选中树节点
      selset_tree_data: null,
      selset_tree_node: null,
      // 选中 (节点)
      selset_point: null,
      // 点列表
      points_data: null,
      // 点数据列表
      point_records: null,
      // 添加对话框状态
      addPoint_dialog: false,
      // 修改对话框状态
      setPoint_dialog: false,
      // 删除对话框状态
      delPoint_dialog: false,
      // 新建点表单
      addPoint_req: {
        code: '',
        name: '',
        type: '',
        remark: '',
        projectId: '',
        positionId: '',
      },
      // 修改点表单
      setPoint_req: {
        code: '',
        name: '',
        type: '',
        remark: '',
        projectId: '',
        positionId: '',
      },
      addPoint_req_rules: {
        name: [{ required: true, message: '请输入点位名称', trigger: ['blur', 'change'] }],
        type: [{ required: true, message: '请选择点位类型', trigger: ['blur', 'change'] }],
      },
      // 添加点位数据对话框
      addPoint_record_dialog: false,
      // 修改点位数据对话框
      setPoint_record_dialog: false,
      // 删除点位数据对话框
      delPoint_record_dialog: false,
      // 新建点数据表单
      addPoint_record_req: {
        name: '',
        code: '',
        pointId: '',
        detectionTime: '',
        temperature: '',
        transferElevation: '',
        backReading: '',
        beforeReading: '',
        archHeight: '',
        correctedObservations: '',
        managerialClass: '',
        constructionState: '',
        remark: '',
      },
      // 点数据缓存
      pointCache: null,
      // 修改点数据表单
      setPoint_record_req: {
        name: '',
        code: '',
        pointId: '',
        detectionTime: '',
        temperature: '',
        transferElevation: '',
        backReading: '',
        beforeReading: '',
        archHeight: '',
        correctedObservations: '',
        managerialClass: '',
        constructionState: '',
        remark: '',
      },
      // 点数据数据缓存
      pointRecordCache: null,
      addPoint_record_req_rules: {
        name: [{ required: true, message: '请输入部位名称', trigger: 'blur' }],
      },
      // kb
      mycopy: ['addPoint_req', 'addPoint_record_req'],
    }
  },
  components: {
    Surface,
    ProjectTree,
    PointForm,
    PointRecord,
  },
  methods: {
    // 刷新树
    refreshTree() {
      this.$refs.children_tree.get_project_tree()
    },
    // 查询点
    async query_click_fun(data, node) {
      this.point_records = null
      // 记录节点数据
      data ? (this.selset_tree_data = data) : console.log('没传data')
      // 记录节点

      data ? (this.selset_tree_node = node) : console.log('没传node')
      // 查询点列表
      let reqData = {}
      reqData.projectId = this.$store.state.projectInfo.id
      reqData.positionId = this.selset_tree_data.id
      // 查询点
      let res = await queryPoint(reqData)
      if (res.result == 0) {
        this.$message.success('查询点成功')
        this.points_data = res.resultContent.pointList
      }
    },
    // 点表格行点击
    point_table_row_click(row) {
      this.selset_point = row
      this.getPonitrecord_(row.id)
    },
    // 获取点查询记录
    async getPonitrecord_(id) {
      console.log(id)
      let res = await getPonitrecord({ pointId: id })
      if (res.result == 0) {
        this.point_records = res.resultContent.pointMonitorList
        if (this.point_records.length <= 0) {
          this.$message.warning('点位无数据记录')
        }
      }
    },
    // 新增点
    add_point_click() {
      if (!this.selset_tree_data || this.selset_point) {
        this.$message.warning('选择部位才能添加点')
      } else {
        // if (this.selset_tree_data.children.length > 0 && this.selset_tree_data.children[0].type == null) {
        if (this.selset_tree_data.children.length > 0 && this.selset_tree_data.children[0].x == null) {
          this.$message.warning('该部位不适合添加点')
        } else {
          this.addPoint_dialog = true
        }
      }
    },
    async addPoint_() {
      let bool = this.$refs.addPointFormRef.validate()
      if (bool) {
        this.addPoint_req.projectId = this.$store.state.projectInfo.id
        this.addPoint_req.positionId = this.selset_tree_data.id
        let res = await addPoint(this.addPoint_req)
        if (res.result == 0) {
          this.$message.success('新建点成功')
          this.add_dialog_exit_fun()
          // 刷新树
          this.refreshTree()
        }
      }
    },
    add_dialog_exit_fun() {
      this.addPoint_dialog = false
      this.$refs.addPointFormRef.resetFields()
    },
    // 修改点
    setPoint_click_fun(data, node) {
      this.setPoint_req = data
      this.setPoint_dialog = true
    },
    async setPoint_() {
      let bool = this.$refs.setPointFormRef.validate()
      if (bool) {
        console.log(this.setPoint_req)
        let res = await setPoint(this.setPoint_req)
        if (res.result == 0) {
          this.$message.success('修改成功')
          this.set_dialog_exit_fun()
          this.$refs.children_tree ? this.$refs.children_tree.get_project_tree() : this.query_click_fun()
        }
      }
    },
    set_dialog_exit_fun() {
      this.setPoint_dialog = false
      this.$refs.setPointFormRef.resetFields()
    },
    // 删除点
    delPoint_click_fun(data, node) {
      this.pointCache = data
      this.delPoint_dialog = true
    },
    async delPoint_() {
      let res = await delPoint({ ids: [this.pointCache.id] })
      if (res.result == 0) {
        this.$message.success('删除成功')
        this.delPoint_dialog = false
        this.$refs.children_tree ? this.$refs.children_tree.get_project_tree() : this.query_click_fun()
      }
    },
    // 新建点数据
    addPoint_record_click_fun() {
      if (this.selset_point) {
        this.addPoint_record_dialog = true
      } else {
        this.$message.warning('未选择点')
      }
    },
    async addPoint_record_() {
      let bool = this.$refs.addPointRecordFormRef.validate()
      if (bool) {
        // 新增数据
        this.addPoint_record_req.pointId = this.selset_point.id
        this.addPoint_record_req.detectionTime = '19991123'
        let res = await addPointRecord(this.addPoint_record_req)
        if (res.result == 0) {
          this.$message.success('新增数据成功')
          this.addPoint_record_exit_fun()
          this.getPonitrecord_(this.selset_point.id)
        }
      }
    },
    addPoint_record_exit_fun() {
      this.addPoint_record_dialog = false
      this.$refs.addPointRecordFormRef.resetFields()
    },
    // 修改点数据
    setPoint_record_click_fun(row) {
      this.setPoint_record_req = row
      this.setPoint_record_dialog = true
    },
    async setPoint_record_() {
      let bool = this.$refs.setPointRecordFormRef.validate()
      if (bool) {
        let res = await setPointRecord(this.setPoint_record_req)
        if (res.result == 0) {
          this.$message.success('修改成功')
          this.setPoint_record_exit_fun()
          this.getPonitrecord_(this.selset_point.id)
        }
      }
    },
    setPoint_record_exit_fun() {
      this.setPoint_record_dialog = false
      this.$refs.setPointRecordFormRef.resetFields()
    },

    // 删除点数据
    delPoint_record_click_fun(row) {
      this.pointRecordCache = row
      this.delPoint_record_dialog = true
    },
    async delPoint_record_() {
      let res = await delPointRecord({ ids: [this.pointRecordCache.id] })
      if (res.result == 0) {
        this.$message.success('删除成功')
        this.delPoint_record_dialog = false
        this.getPonitrecord_(this.selset_point.id)
      }
    },
    //   以表的形式查看
    lookSurface() {
      this.surface_show = true
      let option = {
        titleTxt: this.selset_point.name,
        seriesData: JSON.parse(JSON.stringify(this.point_records)).reverse(),
      }
      this.$refs.surface.setOption(option)
    },
    async node_click_fun(data, node) {
      // 记录节点数据
      this.selset_tree_data = data
      // 记录节点
      this.selset_tree_node = node
      // 记录(节点)数据
      if (data.x != null) {
        this.selset_point = data
        this.getPonitrecord_(data.id)
      } else {
        this.selset_point = null
      }
    },
  },
  mounted() {},
  destroyed() {
    this.$ebs.$off('selectProject_change')
  },
}
</script>

<style lang="scss" scoped>
#Monitor_point {
  width: 100%;
  height: 100%;

  .filter {
    width: 100%;
    height: 65px;
    overflow: hidden;
    overflow-x: auto;
  }

  .middle {
    width: 100%;
    // height: calc(100% - 65px);
    height: 100%;
    display: flex;
    justify-content: space-between;

    & > div {
      overflow: hidden;
      overflow-y: auto;
      box-sizing: border-box;
      padding: 0 10px 0 0;
    }

    .tree {
      width: 300px;
      height: 100%;

      .slide {
        height: 100%;
      }
    }

    .areainfo {
      flex: 1;
      height: 100%;

      .slide {
        &:last-child {
          height: 100%;
        }
      }
    }

    .slide {
      width: 100%;

      .title {
        height: 38px;
        display: flex;
        align-items: center;
        font-size: 24px;
        border-bottom: 2px solid #006886;
        margin-bottom: 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .container {
        width: 100%;
        height: calc(100% - 50px);
        box-sizing: border-box;
        position: relative;
        padding: 10px;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
        overflow-y: auto;
        .position_box {
          position: relative;
          .position_btn {
            position: absolute;
            top: 0;
            right: 0;
          }
        }
      }
    }
  }
}
.addPoint_record_dialog_body {
  height: 50vh;
  overflow-y: auto;
  padding-right: 50px;
}
.pointRecordsBox {
  position: relative;
  .lookSurface {
    position: absolute;
    right: 0;
    top: 0;
  }
}
</style>
